<template>
  <div class="search-wrap" :class="{show: isSearch}">
    <form action="javascript:return true;">
      <van-search placeholder="请输入搜索关键词" v-model="searchValue" background="#f5f6f9" shape="round"
                  style="background: #fff" show-action @search="onSearch">
        <div slot="action" @click="closeSearch">取消</div>
      </van-search>
    </form>

    <div class="scroll-wrapper">
      <scroll class="scroll-list" :data="list">
        <div class="search-list">
          <div class="list-section" v-if="searchBook.length > 0">
            <div class="list-title van-hairline--bottom">联系人</div>
            <div class="message-item" v-for="(item, index) in searchBook" :key="index">
              <div class="avatar"></div>
              <div class="content">
                <p class="name">
                  <span>哈哈</span>
                  <span class="time">21:09</span>
                </p>
                <p class="msg">卡视角地方领军as大索道as都 </p>
              </div>
            </div>
          </div>
          <div class="list-section" v-if="searchGroupBook.length > 0">
            <div class="list-title van-hairline--bottom">密群</div>
            <div class="message-item" v-for="(item, index) in searchGroupBook" :key="index">
              <div class="avatar"></div>
              <div class="content">
                <p class="name">
                  <span>哈哈</span>
                  <span class="time">21:09</span>
                </p>
                <p class="msg">卡视角地方领军as大索道as都 </p>
              </div>
            </div>
          </div>
<!--          <div class="list-section">-->
<!--            <div class="list-title van-hairline&#45;&#45;bottom">聊天记录</div>-->
<!--            <div class="message-item van-hairline&#45;&#45;bottom" v-for="(item, index) in searchBook" :key="index">-->
<!--              <div class="avatar"></div>-->
<!--              <div class="content">-->
<!--                <p class="name">-->
<!--                  <span>哈哈</span>-->
<!--                  <span class="time">21:09</span>-->
<!--                </p>-->
<!--                <p class="msg">卡视角地方领军as大索道as都 </p>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
        </div>
      </scroll>
    </div>
  </div>
</template>

<script>
  import Socket from '../utils/socket'
  import { mapState } from 'vuex'
  export default {
    name: 'search-box',
    props: {
      isSearch: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      ...mapState({
        searchBook: state => state.chat.searchBook,
        searchGroupBook: state => state.chat.searchGroupBook
      })
    },
    data () {
      return {
        list: [],
        searchValue: ''
      }
    },
    methods: {
      closeSearch () {
        this.$parent.isSearch = false
        this.$store.commit('clearSearchList')
      },
      onSearch () {
        Socket.sendData('SearchBook')
        Socket.sendData('SearchGroupBook')
      }
    },
    created () {
    }
  }
</script>

<style scoped lang="scss">
  .van-search {
    position: relative;
    z-index: 100;
  }
  .van-search__content {
    background: #fff;
  }
  .search-wrap {
    display: flex;
    flex-direction: column;
    background: #f5f6f9;
    position: fixed;
    z-index: 500;
    top: 46px;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    pointer-events: none;

    &.show {
      opacity: 1;
      transition: .2s top ease;
      pointer-events: inherit;
      top: 0;
    }

    .search-list {
      position: relative;
      flex: 1;

      .list-section {
        margin-bottom: .1rem;
        background: #fff;
        &:last-child {
          margin-bottom: 0;
        }
      }

      .list-title {
        padding-left: .3rem;
        background: #fff;
        height: .6rem;
        line-height: .6rem;
        font-size: .24rem;
        color: #999;
      }
    }
  }
</style>
